var canMove = false;
// 大圆的位置
var bigPos = $(".fangxiangpan").offset();
// 大圆圆心的坐标
var bigCenter = {
  x: bigPos.left + $(".fangxiangpan").outerWidth() / 2,
  y: bigPos.top + $(".fangxiangpan").outerHeight() / 2,
};


$('#fangxiang').bind('touchstart', function (e) {
  canMove = true;
});

// 给document设置移动，在大圆外面也能移动
$(document).bind('touchmove', function (e) {

  if (!canMove) {
    return;
  }

  //获取滑动屏幕时的X,Y
  var endX = e.originalEvent.changedTouches[0].pageX;
  var endY = e.originalEvent.changedTouches[0].pageY;

  // 判断有无超出最大距离
  // 最大距离你可以自己设置
  var max = 130;
  // 求出偏移的距离
  var disX = endX - bigCenter.x; // 横向偏移
  var disY = endY - bigCenter.y; // 纵向偏移
  var dis = Math.sqrt(Math.pow(disX, 2) + Math.pow(disY, 2)); // 直线偏移

  // 计算出小圆在大圆中的相对位置
  var x = endX - bigPos.left - $("#fangxiang").outerWidth() / 2;
  var y = endY - bigPos.top - $("#fangxiang").outerHeight() / 2;

  // 当超出的时候，控制在大圆之内
  if (dis >= max) {
    // 按比例算出最大偏移
    var tx = disX * max / dis;
    var ty = disY * max / dis;
    // 最终的坐标
    x = bigCenter.x + tx - $("#fangxiang").outerWidth() / 2 - bigPos.left;
    y = bigCenter.y + ty - $("#fangxiang").outerHeight() / 2 - bigPos.top;
  }
  // 设置小圆的位置
  $('#fangxiang').css({
    top: y,
    left: x
  });

});

$(document).bind('touchend', function (e) {
  canMove = false;
  // 滑动结束回到原来的位置
  $('#fangxiang').animate({
    top: 125,
    left: 125
  }, 200);

})